<template>
  <div class="btn-box">
    <template v-for="item of displayButtonList" :key="item.label">
      <!-- 按钮 -->
      <template v-if="!item?.children">
        <el-button v-if="!item.tooltip" :type="item.type" v-bind="item.attrs" @click="btnClick(item)">
          <SvgIcon class="mr5 icon" v-if="displaySvgIcon(item.icon)" :name="setIcon(item, 'svg')"></SvgIcon>
          {{ _transitionLanguages("button", item.label) }}
        </el-button>

        <el-tooltip v-else :content="item.tooltip" placement="top-start" effect="customized">
          <span>
            <el-button :type="item.type" v-bind="item.attrs" @click="btnClick(item)">
              <SvgIcon class="icon" v-if="displaySvgIcon(item.icon)" :name="setIcon(item, 'svg')"></SvgIcon>
              {{ _transitionLanguages("button", item.label) }}
            </el-button>
            <span></span>
          </span>
        </el-tooltip>
      </template>

      <!-- 下拉菜单 -->
      <el-dropdown v-else class="ml10" :trigger="item.trigger" v-bind="item.attrs">
        <el-button :type="item.type" v-bind="item.attrs">
          {{ _transitionLanguages("button", item.label) }}
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <template v-for="child in item.children" :key="child.label">
              <el-dropdown-item @click="btnClick(child)">
                {{ _transitionLanguages("button", child.label) }}
              </el-dropdown-item>
            </template>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </template>
  </div>
</template>
<script setup lang="ts" name="proButton">
import { buttonProps } from "@/components/GlobalButton/interface";

import SvgIcon from "@/components/SvgIcon/index.vue";

import { computed } from "vue";

export interface ProButtonProps {
  buttonList: buttonProps[];
  rowParams?: Object;
  rowIndex?: number;
}

const props = withDefaults(defineProps<ProButtonProps>(), {
  buttonList: () => [],
  rowIndex: -1
});
// 显示的按钮
const displayButtonList = computed(() =>
  props.buttonList.filter(btn => {
    const authStore = useAuthStore();
    if (btn.permissionCode) {
      return authStore.authButtonList.includes(btn.permissionCode);
    }
    if (typeof btn.hide === "function") {
      return btn.hide(props.rowParams);
    } else {
      return !btn.hide;
    }
  })
);

// 语言转换
const _transitionLanguages = (v: string, l: string): string => {
  return transitionLanguages(v, l);
};

// 设置图标
const setIcon = (item: buttonProps, flag: "el-icon" | "svg"): string => {
  const { icon } = item;
  if (!icon) return "";
  const backIcon = flag === "el-icon" && icon.includes("el-") ? icon.substring(3, icon.length) : icon;
  return backIcon;
};

// 是否显示svgIcon
const displaySvgIcon = (icon: string | undefined): boolean => {
  if (!icon) return false;
  return icon?.includes("el-") ? false : true;
};

// 按钮点击
const btnClick = (child: buttonProps): void => {
  if (typeof child.methods === "function") {
    child.methods(props.rowParams, props.rowIndex);
  }
};
</script>
